<script lang="ts" setup>
import { FormItem } from '@formily/element-plus';
import { Field } from '@formily/vue';
import { useComponents, useDesigner } from '@season-designable/vue';
import { each, get, isArray, isEmpty, isString, reduce } from 'lodash-es';
import { computed, useAttrs } from 'vue';
import { SchemaStateMap } from '../schemas/share';

// Schema.silent(true);

// defineOptions({
//   inheritAttrs: false,
// });

const props = defineProps(['schema']);
let designer = useDesigner();
let components = useComponents() || {};
const attrs = useAttrs();

if (!components['FormItem']) {
  components['FormItem'] = { Component: FormItem };
}

const NeedShownExpression = {
  title: true,
  description: true,
  default: true,
  'x-content': true,
  'x-value': true,
};

const isExpression = (val: any) => isString(val) && /^\{\{.*\}\}$/.test(val);

const filterExpression = (val: any): any => {
  if (typeof val === 'object') {
    const results = reduce(
      val,
      (buf: any, value, key) => {
        if (isExpression(value)) {
          return buf;
        } else {
          const filterResult = filterExpression(value);
          if (filterResult === undefined || filterResult === null) return buf;
          if (isArray(val)) {
            return buf.concat([filterResult]);
          }
          buf[key] = filterResult;
          return buf;
        }
      },
      isArray(val) ? [] : {}
    );
    return results;
  }
  if (isExpression(val)) {
    return;
  }
  return val;
};

const toDesignableFieldProps = computed(() => {
  const schema: any = props.schema;
  // console.log(schema);

  const results: Record<string, any> = {};

  if (designer) {
    let nodeIdAttrName = designer?.props?.nodeIdAttrName;
    results[nodeIdAttrName] = schema.name;
  }

  each(SchemaStateMap, (fieldKey, schemaKey) => {
    const value = get(schema, schemaKey);
    if (isExpression(value)) {
      if (!get(NeedShownExpression, schemaKey)) return;
      if (value) {
        results[fieldKey] = value;
        return;
      }
    } else if (value) {
      results[fieldKey] = filterExpression(value);
    }
  });

  const decorator =
    schema['x-decorator'] && get(components, schema['x-decorator']);
  const component =
    schema['x-component'] && get(components, schema['x-component']);

  if (decorator) {
    results.decorator = [decorator.Component];

    if (!isEmpty(schema['x-decorator-props']))
      results.decorator.push(schema['x-decorator-props']);
  }

  if (component) {
    results.component = [component.Component];

    if (!isEmpty(schema['x-component-props']))
      results.component.push(schema['x-component-props']);
  }

  // if (decorator) {
  //   results['decorator'].push({ [nodeIdAttrName]: id });
  // } else if (component) {
  //   results['component'].push({ [nodeIdAttrName]: id });
  // }

  // results.title = results.title && (
  //   <span data-content-editable="title">{results.title}</span>
  // );
  // results.description = results.description && (
  //   <span data-content-editable="description">{results.description}</span>
  // );

  return results;
});
</script>

<template>
  <Field :class="attrs.class" :="toDesignableFieldProps">
    <slot></slot>
  </Field>
</template>

<style lang="scss" scoped></style>
